<script setup lang="ts">
  import {reactive} from 'vue'
  let loginInfo = reactive({
    username:'',
    password:''
  })
  function login(){
    //alert(loginInfo.username+":"+loginInfo.password)
    //假设模拟一下登录成功
    if(loginInfo.username == 'admin' && loginInfo.password == '123'){
      alert('登录成功')
      //需要记住一下登录的状态 - 本地存储 - 
      localStorage.setItem('token','admin')
    }else{
      alert('登录失败')
    }
  }

</script>
<template>
  <div class="login">
    <br>
    <br>
    <form>
      <!-- v-model双向绑定 -->
      <input type="text" v-model="loginInfo.username" placeholder="请输入用户名">
      &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="password" v-model="loginInfo.password" placeholder="请输入密码">
      &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" @click="login" value="登录">
    </form>
  </div>
  
  
</template>
<style scoped>
  
  
</style> 


